<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>【React主题月】4月完结 | 俊劫的学习基地</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/favicon.ico">
    <meta name="description" content="俊劫的学习基地是俊劫的个人博客，用于记录学习笔记、分享音乐、书籍、旅行等个人兴趣的站点。">
    <meta name="keywords" content="俊劫,俊劫的博客,博客,个人博客,vue,vuejs,vuepress,vuepress-theme-reco">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/assets/css/0.styles.5f3e1891.css" as="style"><link rel="preload" href="/assets/js/app.070ad525.js" as="script"><link rel="preload" href="/assets/js/2.1d15da37.js" as="script"><link rel="preload" href="/assets/js/20.8437ea4c.js" as="script"><link rel="preload" href="/assets/js/4.aab0e518.js" as="script"><link rel="prefetch" href="/assets/js/10.46adc9c3.js"><link rel="prefetch" href="/assets/js/11.4fa3a97f.js"><link rel="prefetch" href="/assets/js/12.d930e0cf.js"><link rel="prefetch" href="/assets/js/13.ac14e905.js"><link rel="prefetch" href="/assets/js/14.5db5f3a5.js"><link rel="prefetch" href="/assets/js/15.f912d397.js"><link rel="prefetch" href="/assets/js/16.dc881375.js"><link rel="prefetch" href="/assets/js/17.4b5e68db.js"><link rel="prefetch" href="/assets/js/18.e48da6e4.js"><link rel="prefetch" href="/assets/js/19.4a02bf41.js"><link rel="prefetch" href="/assets/js/21.618c8e36.js"><link rel="prefetch" href="/assets/js/22.097f8d74.js"><link rel="prefetch" href="/assets/js/23.512dda35.js"><link rel="prefetch" href="/assets/js/24.2afceb8f.js"><link rel="prefetch" href="/assets/js/25.a7a02005.js"><link rel="prefetch" href="/assets/js/26.a79e1590.js"><link rel="prefetch" href="/assets/js/27.d0feb2c1.js"><link rel="prefetch" href="/assets/js/28.62b630e3.js"><link rel="prefetch" href="/assets/js/29.119f3256.js"><link rel="prefetch" href="/assets/js/3.8b40c051.js"><link rel="prefetch" href="/assets/js/30.5b11ce87.js"><link rel="prefetch" href="/assets/js/31.94ce824a.js"><link rel="prefetch" href="/assets/js/32.ed4f7508.js"><link rel="prefetch" href="/assets/js/33.c74281cf.js"><link rel="prefetch" href="/assets/js/34.ffb262b0.js"><link rel="prefetch" href="/assets/js/35.ada11000.js"><link rel="prefetch" href="/assets/js/36.edb96889.js"><link rel="prefetch" href="/assets/js/37.02fd03c3.js"><link rel="prefetch" href="/assets/js/38.4e0ec907.js"><link rel="prefetch" href="/assets/js/39.8cd27589.js"><link rel="prefetch" href="/assets/js/40.e59f0b3b.js"><link rel="prefetch" href="/assets/js/41.e3da8313.js"><link rel="prefetch" href="/assets/js/42.c847d1f4.js"><link rel="prefetch" href="/assets/js/43.13c84445.js"><link rel="prefetch" href="/assets/js/44.cbaa9acf.js"><link rel="prefetch" href="/assets/js/45.cb3a266d.js"><link rel="prefetch" href="/assets/js/46.0519c642.js"><link rel="prefetch" href="/assets/js/47.3373a57e.js"><link rel="prefetch" href="/assets/js/48.7efa5760.js"><link rel="prefetch" href="/assets/js/49.923721c8.js"><link rel="prefetch" href="/assets/js/5.07f41da3.js"><link rel="prefetch" href="/assets/js/50.839ac91d.js"><link rel="prefetch" href="/assets/js/51.f98cecb2.js"><link rel="prefetch" href="/assets/js/52.041f20b3.js"><link rel="prefetch" href="/assets/js/53.9464df60.js"><link rel="prefetch" href="/assets/js/54.a9ce67d2.js"><link rel="prefetch" href="/assets/js/55.9733d4b3.js"><link rel="prefetch" href="/assets/js/56.e67c1aa1.js"><link rel="prefetch" href="/assets/js/57.1335a8a7.js"><link rel="prefetch" href="/assets/js/58.83f617d8.js"><link rel="prefetch" href="/assets/js/59.b74c2845.js"><link rel="prefetch" href="/assets/js/6.dcf50b6e.js"><link rel="prefetch" href="/assets/js/60.6e3b00bd.js"><link rel="prefetch" href="/assets/js/61.cd335db9.js"><link rel="prefetch" href="/assets/js/62.ee277d48.js"><link rel="prefetch" href="/assets/js/63.2a34cfa5.js"><link rel="prefetch" href="/assets/js/64.a51989fe.js"><link rel="prefetch" href="/assets/js/65.3abfaea5.js"><link rel="prefetch" href="/assets/js/66.d4f35c55.js"><link rel="prefetch" href="/assets/js/67.2f070f74.js"><link rel="prefetch" href="/assets/js/68.c7da856f.js"><link rel="prefetch" href="/assets/js/69.6c15fcd4.js"><link rel="prefetch" href="/assets/js/7.10c46d97.js"><link rel="prefetch" href="/assets/js/70.68b6cf93.js"><link rel="prefetch" href="/assets/js/71.c49db210.js"><link rel="prefetch" href="/assets/js/72.7ffae8af.js"><link rel="prefetch" href="/assets/js/73.abb40ede.js"><link rel="prefetch" href="/assets/js/74.71723883.js"><link rel="prefetch" href="/assets/js/75.ab7e2e75.js"><link rel="prefetch" href="/assets/js/76.936112a6.js"><link rel="prefetch" href="/assets/js/8.ec9c3735.js"><link rel="prefetch" href="/assets/js/9.b555605d.js">
    <link rel="stylesheet" href="/assets/css/0.styles.5f3e1891.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container have-rightmenu" data-v-f848d4e8><div class="global-loading-wrapper" data-v-2c41f3eb data-v-f848d4e8 data-v-f848d4e8><div class="loader-main" data-v-2c41f3eb><img src="/assets/img/loading.a592e2e5.jpg" alt="loading" data-v-2c41f3eb></div></div> <div class="hide" data-v-f848d4e8><header class="navbar" data-v-f848d4e8><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/logo.png" alt="俊劫的学习基地" class="logo"> <span class="site-name">俊劫的学习基地</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">选择模式</h4> <ul class="color-mode-options"><li class="dark">深色模式</li><li class="light active">浅色模式</li><li class="read">阅读模式</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <ul class="suggestions" style="display:none;"></ul></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont reco-home"></i>首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i></i>前端
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>文档教程</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/docs/imooc/wiki/" class="nav-link"><i class="iconfont reco-blog"></i>慕课教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/es6/" class="nav-link"><i class="iconfont reco-blog"></i>ES6 入门教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/wangdoc/javascript/" class="nav-link"><i class="iconfont reco-blog"></i>网道-JavaScript 教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/angular/" class="nav-link"><i class="iconfont reco-blog"></i>Angular 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/react/" class="nav-link"><i class="iconfont reco-blog"></i>React 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/vue/" class="nav-link"><i class="iconfont reco-blog"></i>Vue 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/node/" class="nav-link"><i class="iconfont reco-blog"></i>Node 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/babel/" class="nav-link"><i class="iconfont reco-blog"></i>Babel 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/webpack/" class="nav-link"><i class="iconfont reco-blog"></i>Webpack 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/typescript/" class="nav-link"><i class="iconfont reco-blog"></i>TypeScript 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/runoob/" class="nav-link"><i class="iconfont reco-blog"></i>菜鸟教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/docschina/" class="nav-link"><i class="iconfont reco-blog"></i>印记中文
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-api"></i>索引
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link"><i class="iconfont reco-category"></i>分类
</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link"><i class="iconfont reco-tag"></i>标签
</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link"><i class="iconfont reco-date"></i>归档
</a></li></ul></div></div><div class="nav-item"><a href="/bookshop/message-board/" class="nav-link"><i class="iconfont reco-suggestion"></i>留言板
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>联系</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/alexwjj" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="/bookshop/linkme/" class="nav-link"><i class="iconfont reco-account"></i>关于我
</a></li></ul></li><li class="dropdown-item"><h4>博客</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/alexwjj/alexwjj.github.io" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-document"></i>本站源码
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://alexwjj.github.io/old-blog" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-document"></i>老版博客
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>其他</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/bookshop/friendslink/" class="nav-link"><i class="iconfont reco-friend"></i>友情链接
</a></li></ul></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-f848d4e8></div> <aside class="sidebar" data-v-f848d4e8><div class="personal-info-wrapper" data-v-34faaed8 data-v-f848d4e8><img src="/img/logo.png" alt="author-avatar" class="personal-img" data-v-34faaed8> <div class="author" data-v-34faaed8>
    俊劫
  </div> <div class="personal-info-details" data-v-34faaed8><div data-v-34faaed8>文章：<span data-v-34faaed8>54</span></div> <div data-v-34faaed8>地点：<span data-v-34faaed8>canton</span></div></div> <div class="slogan" data-v-34faaed8>
    just do it
  </div> <!----></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont reco-home"></i>首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i></i>前端
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>文档教程</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/docs/imooc/wiki/" class="nav-link"><i class="iconfont reco-blog"></i>慕课教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/es6/" class="nav-link"><i class="iconfont reco-blog"></i>ES6 入门教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/wangdoc/javascript/" class="nav-link"><i class="iconfont reco-blog"></i>网道-JavaScript 教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/angular/" class="nav-link"><i class="iconfont reco-blog"></i>Angular 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/react/" class="nav-link"><i class="iconfont reco-blog"></i>React 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/vue/" class="nav-link"><i class="iconfont reco-blog"></i>Vue 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/node/" class="nav-link"><i class="iconfont reco-blog"></i>Node 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/babel/" class="nav-link"><i class="iconfont reco-blog"></i>Babel 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/webpack/" class="nav-link"><i class="iconfont reco-blog"></i>Webpack 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/typescript/" class="nav-link"><i class="iconfont reco-blog"></i>TypeScript 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/runoob/" class="nav-link"><i class="iconfont reco-blog"></i>菜鸟教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/docschina/" class="nav-link"><i class="iconfont reco-blog"></i>印记中文
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-api"></i>索引
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link"><i class="iconfont reco-category"></i>分类
</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link"><i class="iconfont reco-tag"></i>标签
</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link"><i class="iconfont reco-date"></i>归档
</a></li></ul></div></div><div class="nav-item"><a href="/bookshop/message-board/" class="nav-link"><i class="iconfont reco-suggestion"></i>留言板
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>联系</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/alexwjj" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="/bookshop/linkme/" class="nav-link"><i class="iconfont reco-account"></i>关于我
</a></li></ul></li><li class="dropdown-item"><h4>博客</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/alexwjj/alexwjj.github.io" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-document"></i>本站源码
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://alexwjj.github.io/old-blog" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-document"></i>老版博客
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>其他</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/bookshop/friendslink/" class="nav-link"><i class="iconfont reco-friend"></i>友情链接
</a></li></ul></li></ul></div></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2021-算法</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2021-1</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2021-2</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2021-3</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>2021-4</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/136f8f068dffe/" aria-current="page" class="active sidebar-link">【React主题月】4月完结</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2021-5</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper bg-style-2"><div class="articleInfo-wrap" data-v-13f19dad><div class="articleInfo" data-v-13f19dad><ul class="breadcrumbs" data-v-13f19dad><li data-v-13f19dad><a href="/" title="首页" class="fa fa-laptop-house router-link-active" data-v-13f19dad></a></li> <li data-v-13f19dad><a href="/categories/?category=%E5%AD%A6%E4%B9%A0%E6%89%93%E5%8D%A1" title="分类" data-v-13f19dad>学习打卡</a></li> <li data-v-13f19dad><a href="/categories/?category=2021-4" title="分类" data-v-13f19dad>2021-4</a></li> <!----></ul> <div class="info" data-v-13f19dad><div title="作者" class="author fa fa-user" data-v-13f19dad><a href="javascript:;" data-v-13f19dad>俊劫</a></div> <div title="创建时间" class="date fa fa-calendar-alt" data-v-13f19dad><a href="javascript:;" data-v-13f19dad>2021/04/30 00:00:00</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-content"></div></div></div> <h1><img src="">
            【React主题月】4月完结
          </h1> <div class="theme-vdoing-content content__default"><blockquote><p>大厂技术栈，必学之路，冲冲冲！</p></blockquote> <h2 id="博客5-0"><a href="#博客5-0" class="header-anchor">#</a> 博客5.0</h2> <p>很多新功能，冲冲冲</p> <h2 id="_4-29"><a href="#_4-29" class="header-anchor">#</a> 4.29</h2> <h3 id="忽然"><a href="#忽然" class="header-anchor">#</a> 忽然</h3> <p>忽然就想买个显示器，买个属于自己的书桌，周末好能不躺床上。做起来，不管是玩也好，学习也好。
总比躺着好。想到就行动，显示器就买小米34寸的，再搞个书桌。准备起飞🛫。</p> <h3 id="react资源问题"><a href="#react资源问题" class="header-anchor">#</a> react资源问题</h3> <p>网上找了很多react学习资源，大部分都是很老的那种,可以尝试自己搞一个。</p> <h2 id="_4-28"><a href="#_4-28" class="header-anchor">#</a> 4.28</h2> <h3 id="react-router和react-router-dom"><a href="#react-router和react-router-dom" class="header-anchor">#</a> react-router和react-router-dom</h3> <p>react-router: 实现了路由的核心功能, react-router 3.x 版本还包括操作dom的方法,4.x以上就没有了。</p> <p>react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签，Link组件源码a标签行; BrowserRouter和HashRouter 组件，前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由。</p> <p>react-router-native: 基于react-router，类似react-router-dom，加入了react-native运行环境下的一些功能。</p> <h2 id="_4-27"><a href="#_4-27" class="header-anchor">#</a> 4.27</h2> <h3 id="qiankun"><a href="#qiankun" class="header-anchor">#</a> qiankun</h3> <p>u1s1，qiankun官网真的是太简陋了</p> <p>整一整，照着官网demo配置是搞出来了，总结就是主应用配置一下路由，子应用导出一些生命周期，配置一些打包方式，完结散花。。。</p> <p>但是适配一些项目会有问题，暂时还没找到原因。</p> <h3 id="makefile"><a href="#makefile" class="header-anchor">#</a> Makefile</h3> <p>开头必须要用 tab 给出空格，空格键留下的空格会报错。不过挺好用的，特别是针对mono仓库的</p> <h3 id="react-配置开发环境跨域"><a href="#react-配置开发环境跨域" class="header-anchor">#</a> react 配置开发环境跨域</h3> <h4 id="setupproxy"><a href="#setupproxy" class="header-anchor">#</a> setupProxy</h4> <p>src 下 新建 setupProxy.js， 安装<code>http-proxy-middleware</code> 如下配置即可</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token punctuation">{</span> createProxyMiddleware <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;http-proxy-middleware&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">app</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>
    <span class="token function">createProxyMiddleware</span><span class="token punctuation">(</span><span class="token string">&quot;/js&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      target<span class="token operator">:</span> <span class="token string">&quot;http://127.0.0.1:8887/&quot;</span><span class="token punctuation">,</span>
      changeOrigin<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
  app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>
    <span class="token function">createProxyMiddleware</span><span class="token punctuation">(</span><span class="token string">&quot;/fileApi&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      target<span class="token operator">:</span> <span class="token string">&quot;http://123.57.208.169:8888/&quot;</span><span class="token punctuation">,</span>
      changeOrigin<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      pathRewrite<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token string">&quot;^/fileApi&quot;</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h4 id="webpack-配置"><a href="#webpack-配置" class="header-anchor">#</a> webpack 配置</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code>  <span class="token function-variable function">devServer</span><span class="token operator">:</span> <span class="token parameter">config</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    config<span class="token punctuation">.</span>headers <span class="token operator">=</span> <span class="token punctuation">{</span>
      <span class="token string">'Access-Control-Allow-Origin'</span><span class="token operator">:</span> <span class="token string">'*'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> config<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="git-learn"><a href="#git-learn" class="header-anchor">#</a> git learn</h3> <p><a href="https://learngitbranching.js.org/" target="_blank" rel="noopener noreferrer">https://learngitbranching.js.org/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>可视化 git 操作，玩的不太会。。。挺有意思</p> <h3 id="nunjucks"><a href="#nunjucks" class="header-anchor">#</a> Nunjucks</h3> <p>模板引擎 [中文文档]https://nunjucks.bootcss.com/getting-started.html()</p> <h3 id="qps"><a href="#qps" class="header-anchor">#</a> QPS</h3> <p>QPS：Queries Per Second 每秒查询率</p> <h3 id="rpc"><a href="#rpc" class="header-anchor">#</a> RPC</h3> <p>RPC 全称为 Remote Procedure Call 远程过程调用</p> <h3 id="dto"><a href="#dto" class="header-anchor">#</a> DTO</h3> <p>DTO:Data Transfer Object（数据传输对象）</p> <h2 id="_4-26"><a href="#_4-26" class="header-anchor">#</a> 4.26</h2> <h3 id="faiz"><a href="#faiz" class="header-anchor">#</a> Faiz</h3> <p>前奏基本看完了，接下来就是一些中间线了。开始了流星塾的故事，号称敏鬼的编剧开始搞事情。
故事的感情线有点狗血，先是启太郎爱上网友结花，然后又爱上长田，然后海棠喜欢真理，真理喜欢木场，
草加喜欢真理，中间又出来个沙耶对巧有好感，有点乱。</p> <p>草加这个角色真的是，把生活中某些人为达目标不择手段展示的太过了，可能也是怕有人不明白吧。</p> <p>巧这种角色，中间又一段墨迹的剧情也很蛋疼。</p> <p>可能这就是敏鬼吧~~~</p> <p>大部分假面骑士都有个 bug，这么多怪物，警察去哪里了？</p> <h3 id="react-总结"><a href="#react-总结" class="header-anchor">#</a> react 总结</h3> <p>写的差不多了，写的有点烦躁，不知道为什么</p> <h3 id="gitee-page"><a href="#gitee-page" class="header-anchor">#</a> gitee page</h3> <p>想搞个国内的静态站点呢，结果创建到最后是，page 要整改三个月，为啥一开始创建的时候不说呢？</p> <h3 id="react-vscode-插件"><a href="#react-vscode-插件" class="header-anchor">#</a> react vscode 插件</h3> <ul><li>rcc  生成普通组件，tsrcc，ts 版本组件</li> <li>tsrpcc 基于 PureComponent 的组件</li> <li>tsrpfc ts 函数组件</li> <li>tsrsfc ts React.FC</li></ul> <h2 id="_4-25"><a href="#_4-25" class="header-anchor">#</a> 4.25</h2> <h2 id="react-中无状态组件和有状态组件"><a href="#react-中无状态组件和有状态组件" class="header-anchor">#</a> React 中无状态组件和有状态组件</h2> <p>无状态组件(展示组件)主要用来定义模板，接收来自父组件 props 传递过来的数据，使用{props.xxx}的表达式把 props 塞到模板里面。无状态组件应该保持模板的纯粹性，以便于组件复用。创建无状态组件如下：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> Header <span class="token operator">=</span> <span class="token punctuation">(</span>props <span class="token operator">=</span> <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>xxx<span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>有状态组件主要用来定义交互逻辑和业务数据</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">Home</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token operator">&lt;</span>Header <span class="token operator">/</span><span class="token operator">&gt;</span> <span class="token comment">//也可以写成&lt;Header&gt;&lt;/Header&gt;</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="faiz-2"><a href="#faiz-2" class="header-anchor">#</a> Faiz</h3> <p>继续刷</p> <h3 id="react-总结-2"><a href="#react-总结-2" class="header-anchor">#</a> react 总结</h3> <p>继续写写</p> <h2 id="_4-24"><a href="#_4-24" class="header-anchor">#</a> 4.24</h2> <h3 id="faiz-1-13"><a href="#faiz-1-13" class="header-anchor">#</a> Faiz 1-13</h3> <p>B 站看到一些博主的剪辑，勾起来了一些回忆。关于假面骑士 555，最早接触还是初中那会，城里的两个老表来
奶奶家玩的时候，经常会带一些碟片给我看。现在想想，物是人非啊，一个老表因病去世，一个老表已结婚生子，很少联系。</p> <p>但是，回忆嘛，有味道有价值才会勾起自己的回忆。找了很久的资源，很多都是版权问题已经下架。搜索出来的在线观看的那种又是被翻译成
国语的，看着没意思。最后还是在 A 站找到了，然后搬起小板凳开始了重温之旅。</p> <p>一看假面骑士，貌似是给小孩看的，但是这篇假面真不是。</p> <p>第 8 话：本话最佳 music：[纯音乐]梦之碎片 最佳台词：乾巧:<code>我没有梦想,但我可以守护别人的梦想</code></p> <p>还有一部个人喜欢的假面，[假面骑士 W]</p> <p>已回忆 1-13 话（女朋友要买衣服，做指甲，吃麻辣烫）</p> <h3 id="关于周末"><a href="#关于周末" class="header-anchor">#</a> 关于周末</h3> <ul><li>刷抖音浪费太长时间</li> <li>不能在家呆着，躺着躺着时间就没了</li> <li>得养成早起习惯，学习</li> <li>和女朋友两个人很容易吃吃喝喝</li></ul> <p>女朋友不是很喜欢技术，所以我在这里的言论还是比较自由的。她知道我的博客，我倒要看看她什么时候会主动来看看我。</p> <h3 id="独居老人"><a href="#独居老人" class="header-anchor">#</a> 独居老人</h3> <p>年前爷爷走了，剩下奶奶一个人，七十多了，奶奶身体还算可以。爷爷走后，妹妹怕奶奶孤单，还在家陪着，顺便考考驾照。</p> <p>时间慢慢过去，但是老人还算不习惯一个人，毕竟奶奶之前也是很依赖爷爷的。怎么开导老人，成了个难题，老年心理健康挺重要的。</p> <p>想找点事给奶奶做，网上买点手工产品给奶奶做？买花种子给奶奶种？买宠物？家里三条狗了，有个萨摩耶太能吃，奶奶都不想要了。</p> <h2 id="_4-23"><a href="#_4-23" class="header-anchor">#</a> 4.23</h2> <h3 id="react-总结-3"><a href="#react-总结-3" class="header-anchor">#</a> react 总结</h3> <p>下周写完</p> <h3 id="react-ts-项目别名配置"><a href="#react-ts-项目别名配置" class="header-anchor">#</a> react ts 项目别名配置</h3> <p>用了 craco 配置 webpack 别名，不生效。最后一个同事帮我搞了下，发现 ts 也需要配置下 alias，不然就不行。。。</p> <h2 id="_4-22"><a href="#_4-22" class="header-anchor">#</a> 4.22</h2> <h3 id="web-api-通信相关"><a href="#web-api-通信相关" class="header-anchor">#</a> web api 通信相关</h3> <p>团队技术分享，开头举了个面试题：浏览器多个 tab 打开网易云音乐，一个 tab 下播放，另外一个 tab 要暂停，怎么做？</p> <p>开始我想的是用下面这两种，但是这样只能离开页面就关闭，没法和另外一个页面共享状态</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>window<span class="token punctuation">.</span><span class="token function-variable function">onbeforeunload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> e <span class="token operator">=</span> window<span class="token punctuation">.</span>event <span class="token operator">||</span> e<span class="token punctuation">;</span>
  e<span class="token punctuation">.</span>returnValue <span class="token operator">=</span> <span class="token string">&quot;确定离开当前页面吗？&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// 页面的 visibilityState属性可能返回三种状态 prerender，visible 和 hidden</span>
<span class="token comment">// 监听 visibility change 事件</span>
document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;visibilitychange&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 页面变为不可见时触发</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>visibilityState <span class="token operator">==</span> <span class="token string">&quot;hidden&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    document<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">&quot;离开&quot;</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// 页面变为可见时触发</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>visibilityState <span class="token operator">==</span> <span class="token string">&quot;visible&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    document<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">&quot;回来&quot;</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p>还举例了另外一个场景，当前页面有个富文本，正在编辑。另外一个 tab 打开相同的页面，也要编辑，然后引出锁的问题。
言外之意就是模拟协同办公那种情况，后续深入了解一下</p> <h4 id="_1、storage"><a href="#_1、storage" class="header-anchor">#</a> 1、storage</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code>window<span class="token punctuation">.</span><span class="token function-variable function">onstorage</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// 或者这样</span>
window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;storage&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li>前提：两个页面必须同源</li> <li>针对非当前页面 Storages，使用 local 和 session 都可以触发，当前页面修改 Storage 不会触发监听函数，修改的值不变，也不会触发</li></ul> <h4 id="_2、webscoket"><a href="#_2、webscoket" class="header-anchor">#</a> 2、webscoket</h4> <p>全双工通信</p> <h4 id="_3、webworker"><a href="#_3、webworker" class="header-anchor">#</a> 3、webworker</h4> <ul><li>webworker 作为浏览器的一个新特性，可以提供一个额外的线程来执行一些 js 代码，并且不会影响到浏览器用户界面。</li></ul> <h4 id="_4、sharedworker"><a href="#_4、sharedworker" class="header-anchor">#</a> 4、SharedWorker</h4> <ul><li>SharedWorker 可以被多个 window 共同使用，但必须保证这些标签页都是同源的(相同的协议，主机和端口号)</li></ul> <h4 id="_5、broadcastchannel"><a href="#_5、broadcastchannel" class="header-anchor">#</a> 5、BroadcastChannel</h4> <p>每个页面通过创建一个具有相同频道名称的 BroadcastChannel 对象来加入特定频道。 然后实现 onmessage 接口来监听消息事件。通过调用 BroadcastChannel 对象上的 postMessage() 方法可以在频道中广播一条消息给所有订阅者。</p> <p>移动端 safri 不支持 BroadcastChannel</p> <h3 id="webpack-热更新"><a href="#webpack-热更新" class="header-anchor">#</a> webpack 热更新</h3> <p>团队技术分享主题，没有 PPT，讲的比较快，不太理解，自己再研究下</p> <ul><li>webpack-dev-server 建立本地和浏览器的 websocket 链接</li> <li>本地代码更新，触发 compiler.watch(监听本地文件的变化主要是通过文件的生成时间是否有变化)，compiler 完成会触发 tapable 的钩子, 在钩子里通过 websocket 通知浏览器触发更新，会发两个请求<code>xxx/hash.hot-update.json</code> 和 <code>xxx/hash.hot-update.js</code> js 通过 JSONP 插入到页面中</li> <li>通过 hotApply 热更新模块替换
<a href="https://user-gold-cdn.xitu.io/2019/12/1/16ec13499800dfce?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" target="_blank" rel="noopener noreferrer">webpack 热更新流程图<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="padstart-、padend"><a href="#padstart-、padend" class="header-anchor">#</a> padStart()、padEnd()</h3> <p>A.padStart(length, string) 用 string 从左开始填充 A，直到达到最大 length，padEnd 从右开始</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token string">&quot;333&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> a<span class="token punctuation">.</span><span class="token function">padStart</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token string">&quot;0&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
b<span class="token punctuation">;</span> <span class="token comment">//&quot;00333&quot;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="大数相加"><a href="#大数相加" class="header-anchor">#</a> 大数相加</h3> <ul><li>先处理两个数，让位数相同，后续进位</li> <li>根据进位情况，%取余，Math.floor 取整数</li></ul> <h3 id="一些误解"><a href="#一些误解" class="header-anchor">#</a> 一些误解</h3> <p>受控组件泛指，input，checkbox，textarea 等等，只是 react 修改数据需要用 setState，vue 内部帮忙做掉了。</p> <p>数据流，vue 和 react 都是单向数据流，都不允许直接修改 props</p> <p>v-model 语法糖，之前一直以为都是监听的 onChange，vue 官网也写了会根据组件类型进行处理，input 和 change 事件，见下解释</p> <h3 id="vue-v-model-受控组件"><a href="#vue-v-model-受控组件" class="header-anchor">#</a> vue v-model 受控组件</h3> <p>v-model 指令在表单 <code>&lt;input&gt;、&lt;textarea&gt; 及 &lt;select&gt;</code> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。</p> <p>v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：</p> <ul><li>text 和 textarea 元素使用 value property 和 <code>input 事件</code>；</li> <li>checkbox 和 radio 使用 checked property 和 <code>change 事件</code>；</li> <li>select 字段将 value 作为 prop 并将 <code>change 作为事件</code>。</li></ul> <h3 id="技术文章的意义"><a href="#技术文章的意义" class="header-anchor">#</a> 技术文章的意义</h3> <p>昨天发了个文章，写了一些自己的理解，网友指出了一些错误，这就是意义</p> <p>有些自以为对的东西，只是自己觉得。别人不说，你就不知道，加入面试暴露了，就有
直接挂掉的可能</p> <p>所以，多写写，不要抄，就把自己的理解写出来。</p> <h2 id="_4-21"><a href="#_4-21" class="header-anchor">#</a> 4.21</h2> <h3 id="查询-npm-包最新版本"><a href="#查询-npm-包最新版本" class="header-anchor">#</a> 查询 npm 包最新版本</h3> <p>yarn info react</p> <h3 id="升级固定版本-不带"><a href="#升级固定版本-不带" class="header-anchor">#</a> 升级固定版本，不带 ^</h3> <p>yarn add react@17.0.2</p> <h2 id="_4-20"><a href="#_4-20" class="header-anchor">#</a> 4.20</h2> <h3 id="react-typescript-实践"><a href="#react-typescript-实践" class="header-anchor">#</a> React + TypeScript 实践</h3> <p>字节文章 <a href="https://mp.weixin.qq.com/s/mUblBpj6pmdxz9mLKEDJTw" target="_blank" rel="noopener noreferrer">React + TypeScript 实践<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="使用-type-还是-interface"><a href="#使用-type-还是-interface" class="header-anchor">#</a> 使用 Type 还是 Interface？</h3> <ul><li>在定义公共 API 时(比如编辑一个库）使用 interface，这样可以方便使用者继承接口</li> <li>在定义组件属性（Props）和状态（State）时，建议使用 <code>type</code>，因为 <code>type</code> 的约束性更强</li></ul> <p><code>type</code> 和 <code>interface</code> 最大的区别是：<code>type</code> 不支持声明合并，而 <code>interface</code> 可以随时扩展</p> <h3 id="useref-t"><a href="#useref-t" class="header-anchor">#</a> <code>useRef&lt;T&gt;</code></h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 第一种方式的 ref1.current 是只读的（read-only），并且可以传递给内置的 ref 属性，绑定 DOM 元素 ；</span>
<span class="token keyword">const</span> ref1 <span class="token operator">=</span> React<span class="token punctuation">.</span>useRef <span class="token operator">&lt;</span> HTMLInputElement <span class="token operator">&gt;</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token comment">// 第二种方式的 ref2.current 是可变的（类似于声明类的成员变量）</span>
<span class="token keyword">const</span> ref2 <span class="token operator">=</span> <span class="token punctuation">(</span>React<span class="token punctuation">.</span>useRef <span class="token operator">&lt;</span> HTMLInputElement<span class="token punctuation">)</span> <span class="token operator">|</span> <span class="token punctuation">(</span><span class="token keyword">null</span> <span class="token operator">&gt;</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="usestate-t"><a href="#usestate-t" class="header-anchor">#</a> <code>useState&lt;T&gt;</code></h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// `val`会推导为boolean类型， toggle接收boolean类型参数</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>val<span class="token punctuation">,</span> toggle<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>

type User <span class="token operator">=</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> string
  age<span class="token operator">:</span> number
<span class="token punctuation">}</span>
<span class="token comment">// 一些状态初始值为空时（null），需要显示地声明类型：</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>user<span class="token punctuation">,</span> setUser<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span>useState<span class="token operator">&lt;</span>User <span class="token operator">|</span> <span class="token keyword">null</span><span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="函数组件写法"><a href="#函数组件写法" class="header-anchor">#</a> 函数组件写法</h3> <h4 id="_1、react-fc-写法"><a href="#_1、react-fc-写法" class="header-anchor">#</a> 1、React.FC 写法</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code>type AppProps <span class="token operator">=</span> <span class="token punctuation">{</span>
  message<span class="token operator">:</span> string<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> App<span class="token operator">:</span> React<span class="token punctuation">.</span><span class="token constant">FC</span><span class="token operator">&lt;</span>AppProps<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> message<span class="token punctuation">,</span> children <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
    <span class="token punctuation">{</span>message<span class="token punctuation">}</span>
    <span class="token punctuation">{</span>children<span class="token punctuation">}</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h4 id="_2、react-propswithchildren"><a href="#_2、react-propswithchildren" class="header-anchor">#</a> 2、React.PropsWithChildren</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code>type AppProps <span class="token operator">=</span> React<span class="token punctuation">.</span>PropsWithChildren<span class="token operator">&lt;</span><span class="token punctuation">{</span> message<span class="token operator">:</span> string <span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> message<span class="token punctuation">,</span> children <span class="token punctuation">}</span><span class="token operator">:</span> AppProps</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
    <span class="token punctuation">{</span>message<span class="token punctuation">}</span>
    <span class="token punctuation">{</span>children<span class="token punctuation">}</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h4 id="_3-直接声明"><a href="#_3-直接声明" class="header-anchor">#</a> 3.直接声明</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code>type AppProps <span class="token operator">=</span> <span class="token punctuation">{</span>
  message<span class="token operator">:</span> string
  children<span class="token operator">?</span><span class="token operator">:</span> React<span class="token punctuation">.</span>ReactNode
<span class="token punctuation">}</span>

<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> message<span class="token punctuation">,</span> children <span class="token punctuation">}</span><span class="token operator">:</span> AppProps</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
    <span class="token punctuation">{</span>message<span class="token punctuation">}</span>
    <span class="token punctuation">{</span>children<span class="token punctuation">}</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="_4-19"><a href="#_4-19" class="header-anchor">#</a> 4.19</h2> <h3 id="yarn-lock"><a href="#yarn-lock" class="header-anchor">#</a> yarn-lock</h3> <p>升级包版本的时候不要去 package.json 直接改版本号，用命令的形式，yarn add xxx@1.1.1，yarn-lock 会只更新当前安装包的版本</p> <h3 id="object-seal"><a href="#object-seal" class="header-anchor">#</a> Object.seal()</h3> <p>Object.seal()方法封闭一个对象，阻止添加新属性并将所有现有属性标记为不可配置。</p> <p>对象原有属性可以修改</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> people <span class="token operator">=</span> <span class="token punctuation">{</span>
  age<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">seal</span><span class="token punctuation">(</span>people<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">delete</span> people<span class="token punctuation">.</span>age<span class="token punctuation">;</span>
people<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">&quot;JJ&quot;</span><span class="token punctuation">;</span>
people<span class="token punctuation">.</span>age <span class="token operator">=</span> <span class="token number">29</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>people<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { age: 29 }</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="装饰器模式"><a href="#装饰器模式" class="header-anchor">#</a> 装饰器模式</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">thinFace</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;开启瘦脸&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">IncreasingEyes</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;增大眼睛&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

@thinFace
@IncreasingEyes
<span class="token keyword">class</span> <span class="token class-name">Girl</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token comment">// '增大眼睛'</span>
<span class="token comment">// '开启瘦脸'</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>编译成 js 代码，在运行时，会直接调用 thinFace 函数。这个装饰器作用在类上，称之为类装饰器</p> <p>多个装饰器组合在一起，在运行时，要注意，调用顺序是 从下至上 依次调用，正好和书写的顺序相反。</p> <p>装饰器这块有点学问，得多研究下</p> <h2 id="_4-18"><a href="#_4-18" class="header-anchor">#</a> 4.18</h2> <h3 id="新的生活区"><a href="#新的生活区" class="header-anchor">#</a> 新的生活区</h3> <p>换工作以后搬家，随之而来的就是新的生活区，丰潭路这边算是西湖比较老的地方，老小区，老马路，and 老人，
可能是对新生活的期望太大，心理预期差太多，导致有些失落。</p> <p>不过这些都是适应问题，一段时间内总有自己留念的事物，也应该好好珍惜现在的一些，过眼云烟，都是尘埃往事。</p> <h3 id="思考-🤔"><a href="#思考-🤔" class="header-anchor">#</a> 思考 🤔</h3> <p>和个人性格有关吧，只要有个问题卡在心上，自己就会一直不停的去想，去幻想各种最坏的结果。</p> <p>然后给自己带来的就是无尽的焦虑。也好也坏，经常白天想的一个 bug，梦里遇到了，然后梦里解决了，醒了有思路了，问题就解决了，这种情况在我这好几次了。。。</p> <h3 id="关于-node"><a href="#关于-node" class="header-anchor">#</a> 关于 node</h3> <p>node 和 java 的区别？node 作为 bff 到底好在哪？node 是一门后端语言吗？等等问题，网上找也都说的天花乱坠的，读完也没有 get 到点。需要多写写，写多了就知道了，相信一点，勤能补拙！</p> <h2 id="_4-17"><a href="#_4-17" class="header-anchor">#</a> 4.17</h2> <h3 id="上午-改-bug"><a href="#上午-改-bug" class="header-anchor">#</a> 上午，改 bug</h3> <p>周六上午又来了俩线上 bug，在家慢慢查。u1s1，小程序这东西真的。。。</p> <h3 id="react"><a href="#react" class="header-anchor">#</a> react</h3> <p>实战项目视频学习</p> <h3 id="小程序生命周期"><a href="#小程序生命周期" class="header-anchor">#</a> 小程序生命周期</h3> <p>1.<code>onLoad</code>:和<code>beforeMounted</code>相似</p> <p>2.<code>onShow</code>:onLoad 执行的时候 onShow 也会执行。同样，onLoad 会先于<code>onShow</code>执行</p> <p>3.<code>onReady</code>:和 mounted 相似，三者执行顺序：<code>onLoad onShow onReady</code></p> <p>4.<code>onHide</code>:隐藏，例如使用 <code>wx.navigateTo</code> 只是打开新页面 并不关闭原页面</p> <p>5.<code>onUnload</code>:卸载，例如使用 <code>wx.redirectTo,wx.navigateBack</code> 重定向一个页面 原页面已经关闭</p> <p>小程序 tab 切换，只执行一次<code>onLoad</code>，然后页面被缓存，再次进来执行<code>onShow</code>，监听 tab 切换可以用<code>onTabItemTap</code>生命周期</p> <h2 id="_4-16"><a href="#_4-16" class="header-anchor">#</a> 4.16</h2> <h3 id="取消-merge"><a href="#取消-merge" class="header-anchor">#</a> 取消 merge</h3> <p>执行 git merge 之后，vscode 放弃了本地的一些修改，这个时候 pull 代码就会报错<code>您尚未结束您的合并（存在 MERGE_HEAD）</code></p> <p>执行下即可 <code>git merge --abort</code></p> <h3 id="reactis"><a href="#reactis" class="header-anchor">#</a> reactis</h3> <p>一款基于模型的测试、仿真和验证工具</p> <h3 id="买房攻略"><a href="#买房攻略" class="header-anchor">#</a> 买房攻略</h3> <p>准备搞起来，七月份社保满两年，开始看房</p> <h2 id="_4-15"><a href="#_4-15" class="header-anchor">#</a> 4.15</h2> <h3 id="strictmode"><a href="#strictmode" class="header-anchor">#</a> StrictMode</h3> <p>StrictMode 目前有助于：</p> <ul><li>① 识别不安全的生命周期。</li> <li>② 关于使用过时字符串 ref API 的警告</li> <li>③ 关于使用废弃的 findDOMNode 方法的警告</li> <li>④ 检测意外的副作用</li> <li>⑤ 检测过时的 context API</li></ul> <p>对于不安全的生命周期，指的是 UNSAFE_componentWillMount，UNSAFE_componentWillReceiveProps , UNSAFE_componentWillUpdate,使用这些就会报错</p> <h3 id="profiler"><a href="#profiler" class="header-anchor">#</a> Profiler</h3> <p>Profiler 这个 api 一般用于开发阶段，性能检测，检测一次 react 组件渲染用时，性能开销。</p> <p>Profiler 需要两个参数：</p> <ul><li><p>第一个参数：是 id，用于表识唯一性的 Profiler。</p></li> <li><p>第二个参数：onRender 回调函数，用于渲染完成，接受渲染参数</p></li></ul> <h3 id="suspense"><a href="#suspense" class="header-anchor">#</a> Suspense</h3> <p>Suspense 让组件“等待”某个异步操作，直到该异步操作结束即可渲染。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>Suspense fallback<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator">&lt;</span>Spinner <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>ProfilePage <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Suspense<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="forwardref"><a href="#forwardref" class="header-anchor">#</a> forwardRef</h3> <p>父组件想获取孙组件，某一个 dom 元素。这种隔代 ref 获取引用，就需要 forwardRef 来助力</p> <h3 id="监控平台"><a href="#监控平台" class="header-anchor">#</a> 监控平台</h3> <p>之前就接触过 sentry，用的也很少，刚来就接触了俩监控平台，对于这块知识比较欠缺</p> <p>只了解一些全局监听错误的方式，vue handlerError，window.onError,promise unxx 好长一串</p> <p>有个大哥准备搞个开源的监控平台，和他好好学习学习</p> <h2 id="_4-14"><a href="#_4-14" class="header-anchor">#</a> 4.14</h2> <h3 id="技术新人培训"><a href="#技术新人培训" class="header-anchor">#</a> 技术新人培训</h3> <p>一天脱产培训，感觉有赞这边还是挺重视技术的</p> <h3 id="react-复习"><a href="#react-复习" class="header-anchor">#</a> react 复习</h3> <p>培训讲中间件的时候听不懂，也没电脑手机，就在小本本上写写画画</p> <p>巩固一下大脑里面的 react 生命周期图，写了两遍还是有一些收货的。就比如 forceUpdate
不会经过 shouldComponentUpdate</p> <h3 id="react-memo-和-purecomponent-区别"><a href="#react-memo-和-purecomponent-区别" class="header-anchor">#</a> React.memo 和 pureComponent 区别</h3> <p>React.memo 监听的 props 变化</p> <p>pureComponent 是监听 props 和 state 的变化，会进行浅比较，来判断要不要更新组件</p> <h3 id="useeffect-第二个参数"><a href="#useeffect-第二个参数" class="header-anchor">#</a> useEffect 第二个参数</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;effect&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;returnFunction&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><ul><li>空，则每次 componentDidUpdate 时都会 先触发 returnFunction（如果存在），再触发 effect</li> <li>[] 模拟 componentDidMount, returnFunction 模拟 componentWillUnMount</li> <li>[id] 仅在 id 的值发生变化以后触发, 先触发 returnFunction（如果存在），再触发 effect</li></ul> <p>所以尽量不要写空的, 注意是先触发 returnFunction 再 effect</p> <h2 id="_4-13"><a href="#_4-13" class="header-anchor">#</a> 4.13</h2> <h3 id="a-标签"><a href="#a-标签" class="header-anchor">#</a> a 标签</h3> <p>anchor a 标签就是这个单词的缩写，对应 HTMLAnchorElement 类型</p> <h3 id="postman-拦截浏览器请求"><a href="#postman-拦截浏览器请求" class="header-anchor">#</a> postman 拦截浏览器请求</h3> <p>使用插件：Postman Interceptor</p> <p><a href="https://blog.csdn.net/anywayiknow/article/details/79195279" target="_blank" rel="noopener noreferrer">postman interceptor 使用介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="焦虑感"><a href="#焦虑感" class="header-anchor">#</a> 焦虑感</h3> <p>随想</p> <h3 id="vue-react-对比"><a href="#vue-react-对比" class="header-anchor">#</a> vue &amp; react 对比</h3> <h2 id="_4-12"><a href="#_4-12" class="header-anchor">#</a> 4.12</h2> <h3 id="createref"><a href="#createref" class="header-anchor">#</a> createRef</h3> <ul><li>React.createRef 主要用在 class 组件中，用于创建 refs</li> <li>createRef 和 useRef 可以用来保存任何值</li> <li>ref 中值的改变不会触发组件更新</li></ul> <p>createRef 和 useRef， 在初始化阶段两个是没区别的，但是在更新阶段两者是有区别的。</p> <h3 id="useref"><a href="#useref" class="header-anchor">#</a> useRef</h3> <p>useRef 创建的 ref 仿佛就像在函数外部定义的一个<code>全局变量</code>，不会随着组件的更新而重新创建。但组件销毁，它也会消失，不用手动进行销毁</p> <ul><li>useRef，主要用在函数组件中</li> <li>注意：因为函数组件没有实例，如果想用 ref 获取子组件的实例，子组件组要写成类组件</li> <li>高阶组件上使用 refs 转发，refs 将不会透传下去。这是因为 ref 不是 prop 属性。就像 key 一样</li> <li>可以理解为和 vue ref 作用相同，都是为了获取指定 dom</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component<span class="token punctuation">,</span> useEffect<span class="token punctuation">,</span> useRef <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;react&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> childRef <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;useRef&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>childRef<span class="token punctuation">.</span>current<span class="token punctuation">)</span><span class="token punctuation">;</span>
    childRef<span class="token punctuation">.</span>current<span class="token punctuation">.</span><span class="token function">handleLog</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>h1<span class="token operator">&gt;</span>Hello World<span class="token operator">!</span><span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>Child ref<span class="token operator">=</span><span class="token punctuation">{</span>childRef<span class="token punctuation">}</span> count<span class="token operator">=</span><span class="token string">&quot;1&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 因为函数组件没有实例，如果想用ref获取子组件的实例，子组件组要写成类组件</span>
<span class="token keyword">class</span> <span class="token class-name">Child</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">handleLog</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;Child Component&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> count <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token operator">&lt;</span>h2<span class="token operator">&gt;</span>count<span class="token operator">:</span> <span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>h2<span class="token operator">&gt;</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><h3 id="input-受控组件"><a href="#input-受控组件" class="header-anchor">#</a> input 受控组件</h3> <p>给 input 这种组件默认值，是会直接报错<code>value</code> prop to a form field without an <code>onChange</code> handler,</p> <p>这和 react 有关，react 中修改值是通过 setState 的，可以用 onChange 来修改，或者直接添加 readOnly 属性</p> <h3 id="css-module"><a href="#css-module" class="header-anchor">#</a> css module</h3> <ul><li>建立 study.module.css</li> <li>import style from './study.module.css'</li> <li><div className="{style.jj}"></div></li> <li>浏览器显示 <div class="style_cssmodule__1qEwN">css-module-study 练习</div></li></ul> <h3 id="react-组件样式覆盖"><a href="#react-组件样式覆盖" class="header-anchor">#</a> react 组件样式覆盖</h3> <p>给父容器一个 className，直接修改就行</p> <p>如需要声明全局的：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">:</span><span class="token function">global</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">.</span>zent<span class="token operator">-</span>block<span class="token operator">-</span>header</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  margin<span class="token operator">-</span>bottom<span class="token operator">:</span> <span class="token number">15</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="_4-11"><a href="#_4-11" class="header-anchor">#</a> 4.11</h2> <h3 id="react-markdown"><a href="#react-markdown" class="header-anchor">#</a> react markdown</h3> <h3 id="zent-组件"><a href="#zent-组件" class="header-anchor">#</a> zent 组件</h3> <p>基本都写了一遍，熟悉的七七八八了，接下来开始业务组件库的操作了，顺便练习练习 react 和 ts，冲冲冲</p> <h2 id="_4-10"><a href="#_4-10" class="header-anchor">#</a> 4.10</h2> <h3 id="吵架"><a href="#吵架" class="header-anchor">#</a> 吵架</h3> <p>累了累了，动不动就吵架。这次的原因：马上我要过生日了，非要让我自己选好生日礼物，然后她给我买。我不选，我觉得这样很没意思，所以开始折磨我，啥也不让我干，就这么不讲理。昨天的周年纪恋日真是浪费，亏我想了那么久。</p> <h3 id="ts-utility-type"><a href="#ts-utility-type" class="header-anchor">#</a> ts Utility Type</h3> <p>写了一篇笔记，写了写 demo</p> <p>相当于是 ts 的一些封装，type 用的很多，得多用用 type.</p> <h3 id="前同事聚会"><a href="#前同事聚会" class="header-anchor">#</a> 前同事聚会</h3> <p>之前在微医的组长这周五也离职了，去了总结，薪资无敌，原地起飞。</p> <p>四百一个人的海鲜自助，五个男人，战斗力都不行，亏得很，根本吃不回来。</p> <p>晚上十二点多到家，又开始了忧虑，我什么时候能和这些大佬一样？</p> <h2 id="_4-9"><a href="#_4-9" class="header-anchor">#</a> 4.9</h2> <h3 id="新人培训第-3-天"><a href="#新人培训第-3-天" class="header-anchor">#</a> 新人培训第 3 天</h3> <p>完结、散花</p> <h3 id="typescript-中的-any-和-unknown-的区别"><a href="#typescript-中的-any-和-unknown-的区别" class="header-anchor">#</a> TypeScript 中的 any 和 unknown 的区别</h3> <p>简单说下，any 可是是任何类型的父类或者是子类，是类型不安全的，什么是类型不安全？很好理解，就是平常我们懒得写定义，直接 any，让编译器忽略检查 any 类型的值，这么做就会产生一些意想不到的情况，导致代码出错，而且很难去排查。而 unknown 则是类型安全的，unknown 也是可以赋值任何值，但是当我们进行使用它进行一些操作的时候，比如把 unknown 类型的值作为一种方法来调用，编译器就会报错，因为你不确定这个变量是不是个方法，因此是不能调用的，需要在调用前确保它可以被调用。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> fn<span class="token operator">:</span> <span class="token function-variable function">unknown</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> fn <span class="token operator">===</span> <span class="token string">&quot;function&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="_4-8"><a href="#_4-8" class="header-anchor">#</a> 4.8</h2> <h3 id="新人培训第-2-天"><a href="#新人培训第-2-天" class="header-anchor">#</a> 新人培训第 2 天</h3> <h2 id="_4-7"><a href="#_4-7" class="header-anchor">#</a> 4.7</h2> <h3 id="新人培训第-1-天"><a href="#新人培训第-1-天" class="header-anchor">#</a> 新人培训第 1 天</h3> <p>时间安排的比较紧凑，三个班级，近一百人，来着全国各个地方。优秀的人很多，能说会道的人很多，沉默的一看就是干技术的~~~</p> <h3 id="_6-号晚"><a href="#_6-号晚" class="header-anchor">#</a> 6 号晚</h3> <p>7-9 点已经搞过一波了，感觉有点累，心里带着学习的负担，一点话都不想说。。。。</p> <h3 id="三天"><a href="#三天" class="header-anchor">#</a> 三天</h3> <p>三天的培训，个人的心态得调整下，Just Do It！！！</p> <h2 id="_4-6"><a href="#_4-6" class="header-anchor">#</a> 4.6</h2> <h3 id="react-hooks-demo"><a href="#react-hooks-demo" class="header-anchor">#</a> react hooks demo</h3> <p>写了几个，useCallback,useMemo,useEffect,useContext,useReducer，写自定义 hooks 报了错，莫名其妙，暂时还没解决</p> <h3 id="完成-todo-list"><a href="#完成-todo-list" class="header-anchor">#</a> 完成 todo list</h3> <p>后面再学学新的东西，可以优化一波，加一些新功能</p> <h3 id="mac-git-安装"><a href="#mac-git-安装" class="header-anchor">#</a> mac git 安装</h3> <p>系统更新了一波，结果 Git 环境没了，奇奇怪怪</p> <ul><li><a href="https://www.jianshu.com/p/7edb6b838a2e" target="_blank" rel="noopener noreferrer">MAC 上 Git 安装与 GitHub 基本使用<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>先安装 brew,安装比较慢，执行<code>/bin/bash -c &quot;$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)&quot;</code></li> <li>安装完成会有个提醒：<code>Add Homebrew to your PATH in /Users/wujunjie/.zprofile:</code></li> <li>修改_base_profile,找不到文件的，cmd+shift+g 输入 /</li> <li>或者直接命令行<code>vi .bash_profile</code> 添加提示内容</li> <li>source .bash_profile 生效</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>echo <span class="token string">'eval &quot;$(/opt/homebrew/bin/brew shellenv)&quot;'</span> <span class="token operator">&gt;&gt;</span> <span class="token operator">/</span>Users<span class="token operator">/</span>wujunjie<span class="token operator">/</span><span class="token punctuation">.</span>zprofile
eval <span class="token string">&quot;$(/opt/homebrew/bin/brew shellenv)&quot;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="_4-5"><a href="#_4-5" class="header-anchor">#</a> 4.5</h2> <h3 id="todo-list"><a href="#todo-list" class="header-anchor">#</a> todo list</h3> <p>react 写个 todolist，仿造公司的需求管理平台，完成 50%</p> <p>看和写差不多还是很多的，遇到些问题，明天请教下大哥们</p> <h3 id="zent-form"><a href="#zent-form" class="header-anchor">#</a> zent form</h3> <p>写了写，zent 的 form 表单，比较在 pc 端，这是最重要的。</p> <p>和 vue 的开发模式差别挺大，目前还不熟练，多在自己的学习项目多写写，同时练习 ts</p> <h3 id="usecallback-usememo"><a href="#usecallback-usememo" class="header-anchor">#</a> useCallback，useMemo</h3> <p>写了几个 demo，基本会用了</p> <h2 id="_4-4"><a href="#_4-4" class="header-anchor">#</a> 4.4</h2> <h3 id="react-实站学习"><a href="#react-实站学习" class="header-anchor">#</a> react 实站学习</h3> <h3 id="rfc"><a href="#rfc" class="header-anchor">#</a> RFC</h3> <p>Request For Comments</p> <h3 id="vue3-放弃-ie11"><a href="#vue3-放弃-ie11" class="header-anchor">#</a> vue3 放弃 IE11</h3> <p>之前面涂鸦有被问到，vue3 如何兼容 IE11，我说降级处理，使用 defineProperty。面试官说那不就回到了 vue2 了，我无言以对。实际上他说他想了解的是看我会不会往 polyfill 方面想。实际上，vue3 用的 proxy 是浏览器级别的东西，没法用 polyfill 支持。</p> <p>最近尤大提了 RFC，在 vue3 中会放弃 IE11，并且将精力投入在 vue2.7 版本，加入一些优化，支持 composition-api，加入 vite 等等。</p> <p>萌新表示大力支持！！！</p> <h3 id="object-create-proto-propertiesobject"><a href="#object-create-proto-propertiesobject" class="header-anchor">#</a> Object.create(proto, [propertiesObject])</h3> <p><code>let a = Object.create(null)</code> 这样创建的 a 无任何属性，原型也没有</p> <p>如下创建，可以指定创建对象的原型指向</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
  address<span class="token operator">:</span> <span class="token string">&quot;world&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> son <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>person<span class="token punctuation">,</span> <span class="token punctuation">{</span>
  age<span class="token operator">:</span> <span class="token punctuation">{</span>
    value<span class="token operator">:</span> <span class="token number">23</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>son<span class="token punctuation">.</span>address<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// world</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="_4-3"><a href="#_4-3" class="header-anchor">#</a> 4.3</h2> <h3 id="zent-熟悉"><a href="#zent-熟悉" class="header-anchor">#</a> zent 熟悉</h3> <p>公司的开源的组件库，之前一直有计划来写一遍，一直都在脱，现在有了目标，就有动力了。</p> <p>今天写了三大类，基础组件类，导航类，数据类。剩下两类明天写完！！！</p> <h3 id="react-学习文档"><a href="#react-学习文档" class="header-anchor">#</a> react 学习文档</h3> <p>对比 vue 学，先记录着，后面学完了整理一下，对外输出一波</p> <h2 id="_4-2"><a href="#_4-2" class="header-anchor">#</a> 4.2</h2> <h3 id="promise-any"><a href="#promise-any" class="header-anchor">#</a> promise.any()</h3> <p>该方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例返回。只要参数实例有一个变成 fulfilled 状态，包装实例就会变成 fulfilled 状态；如果所有参数实例都变成 rejected 状态，包装实例就会变成 rejected 状态。</p> <p>和 race 很像，只有一点不同，就是不会因为某个 Promise 变成 rejected 状态而结束。</p> <h3 id="关于最近"><a href="#关于最近" class="header-anchor">#</a> 关于最近</h3> <p>来公司一个月了，但是熟悉项目比较慢，大部分时间都用在了聊天。掘金发了两篇文章，大量的人加我咨询一些学习方法，或者是内推，有点忘记了自己的事情。领导给了指标，对我的一些期望，希望自己能达到要求。这段时间就好好学习了，冲冲冲！！！！</p> <h2 id="_4-1"><a href="#_4-1" class="header-anchor">#</a> 4.1</h2> <h3 id="snowpack"><a href="#snowpack" class="header-anchor">#</a> snowpack</h3> <ul><li>目前 bundleless 的开发工具主要有两个: vite 和 snowpack,两者内部都用到了 rollUp,都是基于浏览器的 ESM 来设计的</li> <li>snowpack 可以通过 plugin 的方式接入 webpack 并用于生产，如 @snowpack/plugin-webpack</li> <li>vite 则使用 rollup 这一 bundle 工具作为内置的生产打包工具</li></ul></div></div> <div class="page-edit"><div class="tags"><a href="/tags/?tag=%E5%AD%A6%E4%B9%A0%E6%89%93%E5%8D%A1" title="标签">#学习打卡</a></div> <div class="last-updated"><span class="prefix">最近更新时间：</span> <span class="time">2021/05/05 22:29:33</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/416517735bb6/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">【新公司】3月完结</div></a> <a href="/pages/512f6ae339a31/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">【TypesScript主题月】5.7</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/416517735bb6/" class="prev">【新公司】3月完结</a></span> <span class="next"><a href="/pages/512f6ae339a31/">【TypesScript主题月】5.7</a>→
      </span></p></div></div></div> <div class="theme-vdoing-wrapper article-list bg-style-4"><div class="article-title"><a href="/archives/" class="fa fa-pencil-alt">
      最近更新
    </a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><div><a href="/pages/512f6ae339a31/"><div>【TypesScript主题月】5.7</div></a></div> <div class="date"><span>2021/05/06 00:00:00</span></div></dt></dl><dl><dd>02</dd> <dt><div><a href="/pages/55e7bb3eb7802/"><div>【算法打卡】先来一个波集合</div></a></div> <div class="date"><span>2021/04/22 00:00:00</span></div></dt></dl><dl><dd>03</dd> <dt><div><a href="/pages/0d5c101d17afe/"><div>Vue 转 React不完全指北</div></a></div> <div class="date"><span>2021/04/21 00:00:00</span></div></dt></dl> <div class="more-box"><a href="/archives/" class="more"><i class="fas fa-angle-double-right"></i>前往更多 ...
      </a></div></div></div> <div class="comments-wrapper" style="display:none;"><!----></div></main></div> <div class="footer-wrapper" data-v-51417878 data-v-51417878><span class="footer-reco-theme" data-v-51417878><i class="iconfont reco-github" data-v-51417878></i> <a target="blank" href="https://github.com/alexwjj/alexwjj.github.io" data-v-51417878>alexwjj.github.io@5.0</a></span> <!----> <span class="footer-copyright" data-v-51417878><i class="iconfont reco-copyright" data-v-51417878></i> <a data-v-51417878><span data-v-51417878>俊劫</span> <span class="ml5" data-v-51417878>
          2018 - 2021
        </span></a></span> <span class="footer-view-site" data-v-51417878><i class="iconfont reco-eye" data-v-51417878></i> <span id="busuanzi_container_site_uv" data-v-51417878>
        访客数：<span id="busuanzi_value_site_uv" class="num" data-v-51417878>-</span></span> <span id="busuanzi_container_site_pv" class="ml5" data-v-51417878>
        访问量：<span id="busuanzi_value_site_pv" class="num" data-v-51417878>-</span></span></span> <!----></div> <!----></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div><!----><div></div></div></div>
    <script src="/assets/js/app.070ad525.js" defer></script><script src="/assets/js/2.1d15da37.js" defer></script><script src="/assets/js/20.8437ea4c.js" defer></script><script src="/assets/js/4.aab0e518.js" defer></script>
  </body>
</html>
